<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>图书管理系统</title>
  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f5f5f5;
    }

    h1,
    h2 {
      text-align: center;
    }

    #add-btn {
      display: block;
      margin: 20px auto;
      padding: 10px 20px;
      font-size: 18px;
      background-color: #4CAF50;
      border: none;
      color: #fff;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.3s ease-in-out;
    }

    #add-btn:hover {
      background-color: #3e8e41;
    }

    #book-table {
      width: 80%;
      margin: 20px auto;
      border-collapse: collapse;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      overflow: hidden;
      background-color: #fff;
      border-radius: 4px;
    }

    #book-table th,
    #book-table td {
      padding: 10px;
      text-align: center;
      vertical-align: middle;
      border: 1px solid #ddd;
    }

    #book-table th {
      background-color: #4CAF50;
      color: #fff;
    }

    #book-table tbody tr:nth-child(even) {
      background-color: #f2f2f2;
    }

    .edit-btn,
    .delete-btn {
      padding: 5px 10px;
      font-size: 14px;
      background-color: #4CAF50;
      border: none;
      color: #fff;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.3s ease-in-out;
    }

    .edit-btn:hover,
    .delete-btn:hover {
      background-color: #3e8e41;
    }

    /* CSS 样式 */
    .edit-dialog-wrapper {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      /* display: flex; */
      align-items: center;
      justify-content: center;
    }

    .edit-dialog {
      background-color: #fff;
      padding: 20px;
      border-radius: 4px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      background-color: #f1f1f1; 
       max-width: 400px;
      width: 100%;
    }

    .edit-dialog h2 {
      font-size: 18px;
      margin-bottom: 10px;
    }

    .edit-dialog form label {
      display: block;
      margin-bottom: 10px;
    }

    .edit-dialog form input {
      width: 100%;
      padding: 5px;
      margin-bottom: 10px;
    }

    .edit-dialog form button {
      margin-right: 10px;
    }

    .edit-dialog form button:last-child {
      margin-right: 0;
    }
  </style>
</head>

<body>
  <h1>图书管理系统</h1>

  <!-- 添加图书按钮 -->
  <button id="add-btn">添加图书</button>

  <!-- 显示图书列表 -->
  <h2>图书列表</h2>
  <table id="book-table">
    <thead>
      <tr>
        <th>ID</th>
        <th>书名</th>
        <th>作者</th>
        <th>出版商</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>

  <!-- 编辑图书对话框 -->
  <div class="edit-dialog-wrapper">
    <div class="edit-dialog">
      <h2>编辑图书</h2>
      <form>
        <label for="edit-bookName">书名：</label>
        <input type="text" id="edit-bookName"><br>
        <label for="edit-author">作者：</label>
        <input type="text" id="edit-author"><br>
        <label for="edit-publisher">出版商：</label>
        <input type="text" id="edit-publisher"><br>
        <div class="button-container">
          <button type="button" id="update-btn">更新图书</button>
          <button type="button" id="cancel-btn">取消</button>
        </div>
      </form>
    </div>
  </div>

  <script>
    // 获取DOM元素
    var addBtn = document.getElementById('add-btn');
    var bookTable = document.getElementById('book-table');
    var editDialogWrapper = document.querySelector('.edit-dialog-wrapper');
    var updateBtn = document.getElementById('update-btn');
    var cancelBtn = document.getElementById('cancel-btn');

    // 添加图书按钮点击事件
    addBtn.addEventListener('click', function () {
      showDialog();
    });

    // 编辑图书按钮点击事件
    bookTable.addEventListener('click', function (event) {
      if (event.target.classList.contains('edit-btn')) {
        var bookId = event.target.parentNode.parentNode.dataset.id;
        var bookRow = event.target.parentNode.parentNode;
        var bookName = bookRow.cells[1].textContent;
        var author = bookRow.cells[2].textContent;
        var publisher = bookRow.cells[3].textContent;
        showDialog(bookId, bookName, author, publisher);
      }
    });

    // 显示对话框
    function showDialog(bookId, bookName, author, publisher) {
      if (bookId) {
        document.getElementById('edit-bookName').value = bookName;
        document.getElementById('edit-author').value = author;
        document.getElementById('edit-publisher').value = publisher;
        updateBtn.dataset.id = bookId;
      } else {
        document.getElementById('edit-bookName').value = '';
        document.getElementById('edit-author').value = '';
        document.getElementById('edit-publisher').value = '';
        updateBtn.dataset.id = '';
      }
      editDialogWrapper.style.display = 'flex';
      document.getElementById('edit-bookName').focus();
    }

    // 取消按钮点击事件
    cancelBtn.addEventListener('click', function () {
      hideDialog();
    });

    // 隐藏对话框
    function hideDialog() {
      editDialogWrapper.style.display = 'none';
      document.getElementById('edit-bookName').value = '';
      document.getElementById('edit-author').value = '';
      document.getElementById('edit-publisher').value = '';
    }

    // 更新按钮点击事件
    updateBtn.addEventListener('click', function () {
      var bookId = updateBtn.dataset.id;
      var bookName = document.getElementById('edit-bookName').value;
      var author = document.getElementById('edit-author').value;
      var publisher = document.getElementById('edit-publisher').value;
      if (bookId) {
        updateBook(bookId, bookName, author, publisher);
      } else {
        addBook(bookName, author, publisher);
      }
    });

    // 添加图书
    function addBook(bookName, author, publisher) {
      var xhr = new XMLHttpRequest();
      xhr.open('POST', '/books');
      xhr.setRequestHeader('Content-Type', 'application/json');
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
          if (xhr.status == 200) {
            alert('添加成功！');
            getBooks(); // 添加成功后刷新图书列表
            hideDialog(); // 隐藏对话框
          } else {
            alert('添加失败：' + xhr.statusText);
          }
        }
      };
      var data = JSON.stringify({ bookName: bookName, author: author, publisher: publisher });
      xhr.send(data);
    }

    // 更新图书
    function updateBook(bookId, bookName, author, publisher) {
      var xhr = new XMLHttpRequest();
      xhr.open('PUT', '/books');
      xhr.setRequestHeader('Content-Type', 'application/json');
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
          if (xhr.status == 200) {
            alert('更新成功！');
            getBooks(); // 更新成功后刷新图书列表
            hideDialog(); // 隐藏对话框
          } else {
            alert('更新失败：' + xhr.statusText);
          }
        }
      };
      var data = JSON.stringify({ id: bookId, bookName: bookName, author: author, publisher: publisher });
      xhr.send(data);
    }

    // 删除图书
    bookTable.addEventListener('click', function (event) {
      if (event.target.classList.contains('delete-btn')) {
        var bookId = event.target.parentNode.parentNode.dataset.id;
        if (confirm('确认删除该图书吗？')) {
          deleteBook(bookId);
        }
      }
    });

    function deleteBook(bookId) {
      var xhr = new XMLHttpRequest();
      xhr.open('DELETE', '/books/' + bookId);
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
          if (xhr.status == 200) {
            alert('删除成功！');
            getBooks(); // 删除成功后刷新图书列表
          } else {
            alert('删除失败：' + xhr.statusText);
          }
        }
      };
      xhr.send();
    }

    // 获取所有图书
    function getBooks() {
      var xhr = new XMLHttpRequest();
      xhr.open('GET', '/books');
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
          if (xhr.status == 200) {
            showBooks(JSON.parse(xhr.responseText).data);
          } else {
            alert('获取图书列表失败：' + xhr.statusText);
          }
        }
      };
      xhr.send();
    }

    // 显示所有图书
    function showBooks(books) {
      var tbody = bookTable.tBodies[0];
      tbody.innerHTML = '';
      books.forEach(function (book) {
        var tr = document.createElement('tr');
        tr.dataset.id = book.id;
        tr.innerHTML = '<td>' + book.id + '</td>' +
          '<td>' + book.bookName + '</td>' +
          '<td>' + book.author + '</td>' +
          '<td>' + book.publisher + '</td>' +
          '<td><button class="edit-btn">编辑</button> <button class="delete-btn">删除</button></td>';
        tbody.appendChild(tr);
      });
    }

    // 初始化页面
    getBooks();
  </script>
</body>

</html>